<template>
  <el-container>
    <!-- 头部开始 -->
    <el-header> 
        <section>
          <i class="el-icon-s-fold"><span>订单管理 / 订单详情</span></i> 
        </section>      
        <section>
          <i class="el-icon-search"></i>
          <i class="el-icon-bell">
            <img src="../assets/u28.jpg"> 
              <span>{{this.$store.state.loginName}}</span>
          </i>     
      </section>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-main>
      <div class="main-box">
      <!-- 选择校区 -->
      <div class="main-campus">
        <pre>校   区 :</pre>
        <el-select v-model="value" placeholder="宝安校区" class="area">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- 订单统计 -->
      <div class="main-item">
        <!-- 课程订单 -->
        <div class="main-item-class">
          <div class="item-class-title">
            <p class="title-name">课程订单</p>
            <img src="../assets/u12549.png" />
          </div>
          <div class="item-class-msg">
            <div class="class-msg-left">
              <p>8,846</p>
              <p>订单总金额(元)</p>
              <img src="../assets/u12550.png" />
            </div>
            <div class="class-msg-right class-msg-left">
              <p>289</p>
              <p>订单总数(条)</p>
              <img src="../assets/u12550.png" />
            </div>
          </div>
          <div class="item-class-bottom">
            <p>
              昨日订单总金额：
              <i>6758</i> 元
            </p>
            <p>
              昨日订单总数：
              <i>267</i> 条
            </p>
          </div>
        </div>
        <!-- 商品订单 -->
        <div class="main-item-class">
          <div class="item-class-title">
            <p class="title-name">课程订单</p>
            <img src="../assets/u12549.png" />
          </div>
          <div class="item-class-msg">
            <div class="class-msg-left">
              <p>8,846</p>
              <p>订单总金额(元)</p>
              <img src="../assets/u12550.png" />
            </div>
            <div class="class-msg-right class-msg-left">
              <p>289</p>
              <p>订单总数(条)</p>
              <img src="../assets/u12550.png" />
            </div>
          </div>
          <div class="item-class-bottom">
            <p>
              昨日订单总金额：
              <i>6758</i> 元
            </p>
            <p>
              昨日订单总数：
              <i>267</i> 条
            </p>
          </div>
        </div>
        <!-- 账户订单 -->
        <div class="main-item-class">
          <div class="item-class-title">
            <p class="title-name">课程订单</p>
            <img src="../assets/u12549.png" />
          </div>
          <div class="item-class-msg">
            <div class="class-msg-left">
              <p>8,846</p>
              <p>订单总金额(元)</p>
              <img src="../assets/u12550.png" />
            </div>
            <div class="class-msg-right class-msg-left">
              <p>289</p>
              <p>订单总数(条)</p>
              <img src="../assets/u12550.png" />
            </div>
          </div>
          <div class="item-class-bottom">
            <p>
              昨日订单总金额：
              <i>6758</i> 元
            </p>
            <p>
              昨日订单总数：
              <i>267</i> 条
            </p>
          </div>
        </div>
      </div>
      <!-- 订单列表 -->
      <div class="main-list">
        <div class="main-list-tab">
          <ul>
            <router-link to="/finance-item1" tag="li">课程订单</router-link>
            <router-link to="/finance-item2" tag="li" class="active">商品订单</router-link>
            <router-link to="/finance-item3" tag="li">账户订单</router-link>
            <router-link to="/finance-item4" tag="li">已删除订单</router-link>
          </ul>
        </div>
        <div class="main-list-content">
          <div class="list-con-select">
            <div class="select-box">
              <em>订单种类：</em>
              <el-select v-model="value1" placeholder="全部种类" class="allkinds">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value1"
                ></el-option>
              </el-select>
            </div>
            <div class="select-box">
              <em>订单状态：</em>
              <el-select v-model="value2" placeholder="全部状态" class="allkinds">
                <el-option
                  v-for="item in options2"
                  :key="item.value2"
                  :label="item.label"
                  :value="item.value2"
                ></el-option>
              </el-select>
            </div>
            <div class="select-box">
              <em>搜索：</em>
              <el-select v-model="value3" placeholder="学员" class="selected1">
                <el-option
                  v-for="item in options3"
                  :key="item.value3"
                  :label="item.label"
                  :value="item.value3"
                ></el-option>
              </el-select>
              <el-input v-model="input" placeholder="请输入内容" class="search" @input="handleInput()"></el-input>
              <i class="el-icon-search search-btn"></i>
            </div>
            <div class="select-box">
              <em>商品分类：</em>
              <el-select v-model="value4"  class="allkinds">
                <el-option
                  v-for="item in options4"
                  :key="item.value4"
                  :label="item.label"
                  :value="item.value4"
                ></el-option>
              </el-select>
            </div>
            <div class="select-box">
              <em>商品：</em>
              <el-select v-model="value5" placeholder="全部状态" class="allkinds">
                <el-option
                  v-for="item in options5"
                  :key="item.value5"
                  :label="item.label"
                  :value="item.value5"
                ></el-option>
              </el-select>
            </div>
            <div class="select-box">
              <div class="block">
                <em>交易日期：</em>
                <el-date-picker
                  v-model="value6"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="list-con-msg">
            <ul>
              <li>
                订单数目：
                <em style="color:#FF0000;">189</em>条
              </li>
              <li>
                应收：
                <em>3980</em>元
              </li>
              <li>
                实收：
                <em>2450</em>元
              </li>
              <li>
                尾款
                <em>345</em>元
              </li>
              <li>
                积分抵扣
                <em>2000</em>元
              </li>
            </ul>
            <button>批量删除</button>
            <button>导出订单</button>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100% height:100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="订单编号" width="120px">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="学员姓名"></el-table-column>
            <el-table-column prop="goodsTitle" label="商品名称"></el-table-column>
            <el-table-column prop="perPrice" label="单价"></el-table-column>
            <el-table-column prop="price" label="金额"></el-table-column>
            <el-table-column prop="discount" label="优惠" width="60px"></el-table-column>
            <el-table-column prop="signedAmount" label="签单金额"></el-table-column>
            <el-table-column prop="paid" label="实收" width="60px"></el-table-column>
            <el-table-column prop="finalPayment" label="尾款"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
            <el-table-column prop="purchaseSource" label="购买来源"></el-table-column>
            <el-table-column prop="transactionHour" label="交易时间"></el-table-column>
            <el-table-column prop="operating" label="操作" width="150px">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button type="text" @click="dialogVisible = true">支付</el-button>
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      </div>
    </el-main>
    <!-- 支付弹出框 -->
    <el-dialog
      title="支付"
      :visible.sync="dialogVisible"
      width="459px"
      height="167px"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="支付金额:">
          <span>100元</span>
        </el-form-item>
        <el-form-item label="支付方式:">
          <el-select v-model="form.region" placeholder="支付宝">
            <el-option label="支付宝" value="zhifubao"></el-option>
            <el-option label="微信" value="weixin"></el-option>
            <el-option label="现金" value="cash"></el-option>
            <el-option label="银联" value="yinlian"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :plain="true" @click="open2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 内容结束 -->
  </el-container>
</template>
<script>
export default {
  name: "finance-item2",
   mounted(){
     this.$axios
        .get("/app/mock/264777/example/1598250282720")
        .then((res) => {
          this.tableData = res;
          this.tableData1 = res;
        })
        .catch((err) => console.log(err));
  },
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      value: "", //校区
      options1: [
        {
          value1: "选项1",
          label: "定",
        },
        {
          value1: "选项2",
          label: "续",
        },
        {
          value1: "选项3",
          label: "薪",
        },
      ],
      value1: "", //订单种类
      options2: [
        {
          value2: "选项1",
          label: "交易成功",
        },
        {
          value2: "选项2",
          label: "交易关闭",
        },
        {
          value2: "选项3",
          label: "已退费",
        },
        {
          value2: "选项4",
          label: "未支付",
        },
      ],
      value2: "", //订单状态
      options3: [
        {
          value3: "选项1",
          label: "学员",
        },
      ],
      value3: "", //搜索
      options4: [
        {
          value4: "选项1",
          label: "商品类型",
        },
        {
          value4: "选项2",
          label: "商品类型1",
        },
        {
          value4: "选项3",
          label: "商品类型2",
        },
      ],
      value4: "", //商品分类
      options5: [
        {
          value5: "选项1",
          label: "商品",
        },
        {
          value5: "选项2",
          label: "商品1",
        },
        {
          value5: "选项3",
          label: "商品2",
        },
      ],
      value5: "", //商品
      value6: "", //交易日期
      tableData: [],
      tableData1: [],
      multipleSelection: [],
      dialogVisible: false, //支付弹出框是否出现
      form: {
        name: "",
        region: "",
        date1: "",
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 关闭弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    paysuccess() {
      this.dialogVisible = false;
      this.$confirm("确认支付？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    open2() {
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        message: "支付成功",
      });
    },
    deleteRow(index, rows) {
      this.$confirm("确认删除？")
        .then((_) => {
          rows.splice(index, 1);
          done();
        })
        .catch((_) => {});
    },
    handleInput() {
      console.log(this.input);
      var newlist = this.tableData1.filter(
        (item) => item.name.indexOf(this.input) > -1
      );
      console.log(newlist);
      this.tableData = newlist;
      if (this.input == "") {
        this.tableData = this.tableData1;
      }
    },
  },
};
</script>
<style>
/* 支付弹出框 */
.el-message-box {
  width: 459px;
  min-height: 150px;
}
</style>
<style scoped>
/* 清除默认样式 */
ul {
  list-style: none;
}
em,
i {
  font-style: normal;
}
input {
  outline: none;
}
/* 头部开始 */
.el-header{
  display: flex;
  justify-content: space-between;
  line-height: 65px !important;
  color: #5A5A5A;
}
.el-header img{
  width: 26px;
  height: 26px;
  margin-left: 8px;
}
.el-header span{
  font-size: 14px;
  margin-left: 10px;
  margin-top: -10px !important;
}
.el-header i{
  margin-right: 20px;
}
/* 头部结束 */
/* 内容开始 */
.main-box{
  width: 1200px;
}
.main-campus {
  width: 1200px;
  height: 60px;
  /* background:#fff; */
  position: relative;
}
.main-campus pre {
  position: absolute;
  right: 280px;
  top: 14px;
  font-size: 14px;
  color: #242425;
}
.main-campus .area {
  position: absolute;
  right: 0;
  top: 0;
  width: 272px;
  height: 40px;
}
/* 订单 */
.main-item {
  width: 1200px;
  height: 230px;
}
.main-item-class {
  width: 387px;
  height: 230px;
  background: #fff;
  position: relative;
  float: left;
}
.main-item-class:nth-child(2) {
  margin: 0 18px;
}
.main-item-class .item-class-title {
  width: 100%;
  height: 46px;
}
.item-class-title .title-name {
  font-size: 16px;
  color: #979797;
  line-height: 46px;
  margin-left: 10px;
}
.item-class-title img {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 14px;
  top: 14px;
}
.item-class-msg {
  width: 100%;
  height: 122px;
  border-bottom: 1px solid #e9e9e9;
}
.class-msg-left {
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top: 10px;
  float: left;
}
.class-msg-left p:first-child {
  font-size: 20px;
  color: #272727;
}
.class-msg-left p:nth-child(2) {
  font-size: 14px;
  color: #272727;
  margin-top: 10px;
  margin-bottom: 15px;
}
.class-msg-left img {
  width: 139px;
  height: 30px;
}
.item-class-bottom {
  width: 100%;
  height: 62px;
  padding-top: 10px;
}
.item-class-bottom p {
  font-size: 14px;
  color: #5f5f5f;
  margin-left: 10px;
}
.item-class-bottom p:nth-child(2) {
  margin-left: 14px;
}
/* 订单列表 */
.main-list {
  width: 1200px;
  height: 625px;
  /* background: orange; */
  margin-top: 20px;
}
.main-list-tab {
  width: 100%;
  height: 46px;
  border-bottom: #f2f2f2;
}
.main-list-tab li {
  float: left;
  margin: 0 16px;
  width: 90px;
  line-height: 45px;
  font-size: 14px;
  color: #5f5f5f;
  text-align: center;
}
.main-list-tab .active {
  color: #ff0000;
  border-bottom: 1px solid #ff0000;
}
.main-list-content {
  width: 1240px;
  height: 100%;
}
.list-con-select {
  width: 100%;
  height: 100px;
}
.select-box {
  height: 35px;
  padding-top: 10px;
  float: left;
  margin-bottom: 10px;
  position: relative;
}
.select-box em {
  font-size: 14px;
  color: #272727;
  margin-left: 20px;
  margin-right: 5px;
}
.select-box .allkinds {
  width: 273px !important;
  height: 32px !important;
  position: static !important;
}
.selected1 {
  width: 80px;
  position: static !important;
}
.search {
  width: 222px;
}
.search-btn {
  position: absolute;
  right: 15px;
  top: 24px;
  font-size: 14px;
  color: #c7c7c7;
}
.list-con-msg {
  width: 100%;
  height: 50px;
  display: flex;
}
.list-con-msg ul {
  display: flex;
  width: 980px;
}
.list-con-msg ul li {
  font-size: 14px;
  color: #333333;
  margin: 18px 20px;
}
.list-con-msg button {
  width: 89px;
  height: 32px;
  margin-left: 10px;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  margin-top: 4px;
  cursor: pointer;
  outline: none;
}
.list-con-msg button:nth-child(2) {
  background: #bcbcbc;
}
.list-con-msg button:nth-child(3) {
  background: #ff0000;
}
.list-con-title {
  width: 1197px;
  height: 54px;
  border-color: #e8e8e8;
  border-radius: 4px;
  background: #fafafa;
  display: flex;
  align-items: center;
}
.list-con-title input {
  margin-left: 5px;
  margin-top: 10px;
}
.list-con-title p {
  font-size: 14px;
  color: #272727;
  margin-left: 30px;
  margin-right: 9px;
}
.list-con-items {
  width: 100%;
}
.con-items-box {
  width: 100%;
  height: 72px;
  display: flex;
  line-height: 72px;
  border-bottom: 1px solid #e8e8e8;
}
.con-items-box input {
  margin-top: 30px;
  margin-left: 10px;
}
.list-con-items p {
  margin-left: 20px;
  margin-right: 16px;
  font-size: 14px;
  color: #666666;
}
.list-con-items .somebtn em {
  color: #ff0000;
}
.el-button--text {
  color: #ff0000;
}
/* 内容结束 */
</style>
